<template>
  <div class="app-container">
    <h2 style="text-align: center">创建课程大纲</h2>

    <el-steps :active="2" finish-status="success" align-center>
      <el-step title="添加课程的基本信息"></el-step>
      <el-step title="创建课程大纲"></el-step>
      <el-step title="最终发布"></el-step>
    </el-steps>



    <el-card style="margin-top: 15px">
      <el-row>
        <el-col>
          <el-button type="text" @click="openDialog" style="margin-left: 10px">添加章节</el-button>
        </el-col>
      </el-row>
      <!--主体内容区-->
      <ul class="chanpterList">
        <!--章节-->
        <li v-for="item1 in chapterVideoList" :key="item1.id">
          <p>
            {{item1.title}}
            <span class="acts">
            <el-button type="text" @click="openVideoDialog(item1.id)">添加小节</el-button>
            <el-button type="text" @click="openEditDialog(item1.id)">编辑</el-button>
            <el-button type="text" @click="removeChapter(item1.id)">删除</el-button>
          </span>
          </p>
          <!--小节-->
          <ul class="chanpterList videoList">
            <li v-for="item2 in item1.children" :key="item2.id">
              <p>{{item2.title}}
                <span class="acts">
                 <el-button type="text" @click="openEditVideoDialog(item2.id)">编辑</el-button>
                <el-button type="text" @click="deleteVideoById(item2.id)">删除</el-button>
          </span>
              </p>
            </li>
          </ul>
        </li>
      </ul>

      <!--保存下一步-->
      <el-form label-width="120px">
        <el-form-item>
          <el-button type="primary" @click="prev">上一步</el-button>
          <el-button type="primary" @click="next">保存下一步</el-button>
        </el-form-item>
      </el-form>
    </el-card>

    <!--添加章节的弹出框-->
    <el-dialog :title="chapterDialogText" :visible.sync="setChapterDialogVisible" width="50%">
      <el-form :model="chapter" label-width="100px">
        <el-form-item label="章节名称">
          <el-input v-model="chapter.title"></el-input>
        </el-form-item>
        <el-form-item label="章节排序">
          <el-input-number :min="1" v-model="chapter.sort">

          </el-input-number>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button style="" @click="setChapterDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="saveOrUpdate">确 定</el-button>
      </div>
    </el-dialog>

    <!--添加小节的弹出框-->
    <el-dialog :title="videoDialogText" :visible.sync="setVideoDialogVisible" width="50%">
      <el-form :model="video" label-width="100px">
        <el-form-item label="课时名称">
          <el-input v-model="video.title"></el-input>
        </el-form-item>
        <el-form-item label="课时排序">
          <el-input-number :min="1" v-model="video.sort">
          </el-input-number>
        </el-form-item>
        <el-form-item label="是否免费">
          <el-radio-group v-model="video.isFree">
            <el-radio :label="true">免费</el-radio>
            <el-radio :label="false">默认</el-radio>
          </el-radio-group>
        </el-form-item>

        <el-form-item label="上传视频">
          <el-upload
            :on-success="handlerVideoUploadSuccess"
            :on-remove="handlerVideoUploadRemove"
            :before-remove="handlerBeforeRemove"
            :file-list="fileList"
            class="upload-demo"
            :limit="1"
            drag
            type="file"
            :action="BASE_API + '/vod/upload'"
            auto-upload>
            <i class="el-icon-upload"></i>
            <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
          </el-upload>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button style="" @click="setVideoDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="saveOrUpdateVideo">确 定</el-button>
      </div>
    </el-dialog>

  </div>
</template>

<script>
  import ChapterApi from '@/api/edu/chapter'
  import VideoApi from '@/api/edu/video'

  export default {
    name: 'chapter',
    data() {
      return {
        //章节小节列表
        chapterVideoList: [],

        //课程Id
        courseId: '',

        //控制弹框的显示
        setChapterDialogVisible: false,

        //封装章节的数据
        chapter: {
          sort: 1
        },

        //小节的弹框显示
        setVideoDialogVisible: false,

        //小节对象
        video: {
          sort: 1
        },

        chapterDialogText: '',

        videoDialogText: '',

        //获取基础请求路径
        BASE_API: process.env.BASE_API,
        //上传文件列表
        fileList: []
      }
    },

    created() {
      //获取路由中的参数
      if (this.$route.params.id) {
        this.courseId = this.$route.params.id
        this.getChapterAndVideoByCourseId()
      }
    },
    methods: {
      //前往第一步
      prev() {
        this.$router.push(`/course/info/${this.courseId}`)
      },

      //前往第三步
      next() {
        this.$router.push(`/course/publish/${this.courseId}`)
      },

      //根据课程Id查询章节和小节,返回数据为树形的结构
      async getChapterAndVideoByCourseId() {
        const { data } = await ChapterApi.getChapterAndVideo(this.courseId)
        this.chapterVideoList = data.data
      },

      //添加或修改章节信息
      async saveOrUpdate() {
        if (this.chapter.id) {
          this.updateChapter()
        } else {
          this.chapter.courseId = this.courseId
          await ChapterApi.addChapter(this.chapter)
          this.setChapterDialogVisible = false
          this.getChapterAndVideoByCourseId()
          this.$message.success('添加成功')
        }
      },

      //控制添加章节的弹框显示
      openDialog() {
        this.chapter = { sort: 1 }
        this.chapterDialogText = '添加章节'
        this.setChapterDialogVisible = true
      },

      //控制修改章节信息的弹框
      async openEditDialog(chapterId) {
        const { data } = await ChapterApi.getChapter(chapterId)
        this.chapter = data.data
        this.chapterDialogText = '修改章节'
        this.setChapterDialogVisible = true
      },

      //发送请求修改章节
      async updateChapter() {
        await ChapterApi.editChapter(this.chapter)
        this.setChapterDialogVisible = false
        this.getChapterAndVideoByCourseId()
        this.$message.success('修改成功')
      },

      //根据Id删除章节信息
      async removeChapter(chapterId) {
        const result = await this.$confirm('您确认要删除该章节吗', '提示', {
          confirmButtonText: '确认',
          cancelButtonText: '取消',
          type: 'error'
        }).catch(e => e)
        if (result === 'cancel') return this.$message.info('取消删除')
        await ChapterApi.deleteChapter(chapterId)
        this.getChapterAndVideoByCourseId()
        this.$message.success('删除成功')
      },

      //#################################################################
      //添加小节的弹框显示
      openVideoDialog(chapterId) {
        this.video = { sort: 0 }
        this.fileList = []
        this.video.courseId = this.courseId
        this.video.chapterId = chapterId
        this.videoDialogText = '添加课时'
        this.setVideoDialogVisible = true
      },

      //添加或保存小节的信息
      async saveOrUpdateVideo() {
        if (this.video.id) {
          this.updateVideoInfo()
        } else {
          await VideoApi.addVideo(this.video)
          this.getChapterAndVideoByCourseId()
          this.$message.success('添加成功')
          this.setVideoDialogVisible = false
        }
      },

      //点击删除小节信息
      async deleteVideoById(VideoId) {
        const result = await this.$confirm('您确认要删除该课时吗', '提示', {
          cancelButtonText: 'cancel',
          confirmButtonText: 'confirm',
          type: 'error'
        }).catch(e => e)
        if (result === "cancel") return this.$message.info('取消删除')
        await VideoApi.deleteVideo(VideoId)
        this.getChapterAndVideoByCourseId()
        this.$message.success('删除成功')
      },

      //打开修改课时信息
      async openEditVideoDialog(videoId) {

        const { data } = await VideoApi.getVideoInfo(videoId)
        this.video = data.data
        this.fileList = []
        this.videoDialogText = '修改课时信息'
        this.setVideoDialogVisible = true
      },

      //修改课时信息
      async updateVideoInfo() {
        await VideoApi.updateVideo(this.video)
        this.setVideoDialogVisible = false
        this.getChapterAndVideoByCourseId()
        this.$message.success('修改成功')
      },

      //##################################处理视频上传
      //处理文件上传成功后的事件
      handlerVideoUploadSuccess(response, file) {
        //赋值视频上传后的ID
        this.video.videoSourceId = response.data.data
        //赋值视频上传后的名称
        this.video.videoOriginalName = file.name
      },

      //处理文件移除时的事件
      async handlerVideoUploadRemove() {
        await VideoApi.deleteVideoById(this.video.videoSourceId)
        this.$message.success('删除视频成功')
        //清空文件列表
        this.fileList = []
        //删除后清空视频Id以及名称，不要再次添加到数据库中
        this.video.videoSourceId = ''
        this.video.videoOriginalName = ''
      },

      //点击移除之前调用
      handlerBeforeRemove() {
        return this.$confirm('您确认要删除该视频嘛', '提示', {
          cancelButtonText: '取消',
          confirmButtonText: '确认',
          type: 'error'
        })
      }
    }
  }
</script>

<style scoped>

  .chanpterList {
    position: relative;
    list-style: none;
    margin: 0;
    padding: 0;
  }

  .chanpterList li {
    position: relative;
  }

  .chanpterList p {
    font-size: 20px;
    margin: 10px 0;
    padding: 10px;
    height: 60px;
    line-height: 40px;
    width: 100%;
    border: 1px solid #DDD;
  }

  .chanpterList .acts {
    float: right;
    font-size: 14px;
  }

  .videoList {
    padding-left: 50px;
  }

  .videoList p {
    font-size: 14px;
    margin: 10px 0;
    padding: 10px;
    height: 50px;
    line-height: 30px;
    width: 100%;
    border: 1px dotted #DDD;
  }

</style>
